<template>
  <div class="carsouelgroup">
    <main class="main">
      <a-button
        type="primary"
        style="margin-bottom: 15px"
        @click="showAddModel"
      >
        新增分组
      </a-button>
      <!-- rowkey指定列表渲染的key值 record 为暴露出来的每行的数据 -->
      <a-table
        :data-source="groupList"
        :columns="datasFomat"
        :bordered="true"
        :rowKey="(record) => record.id"
      >
        <!-- 创建时间 -->
        <template slot="createdAt" slot-scope="text, record">
          <span>{{ record.createdAt | fomatterTime }}</span>
        </template>

        <!-- 操作 -->
        <template slot="operation" slot-scope="text, record">
          <a-popconfirm
            placement="bottom"
            title="确认删除吗？该操作不可逆！"
            ok-text="确认"
            cancel-text="取消"
            @confirm="delgroup(record)"
          >
            <a-button type="danger">
              删除
            </a-button>
          </a-popconfirm>
        </template>
      </a-table>

      <!-- 新增分组对话框 -->
      <a-modal
        title="新增分组"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="addGroup"
        @cancel="closeAddModel"
      >
        <a-form-model :model="groupForm" ref="ruleForm" :rules="rules">
          <a-form-model-item label="轮播图分组" required prop="site">
            <a-input
              v-model.trim="groupForm.site"
              placeholder="首页-顶部"
            ></a-input>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </main>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import {
  getCarouselGroup,
  delCarouselGroup,
  addCarouselGroup,
} from '@/services/shopApi/carousel';
import timeFomatter from '@/utils/farmatterTime';
import { message } from 'ant-design-vue';

export default {
  name: 'carouselgroup',
  data() {
    return {
      rules: {
        site: [
          {
            required: true,
            message: '请填写分组位置！',
            trigger: ['blur', 'change'],
          },
        ],
      },
      // 新增分组信息
      groupForm: {
        // 轮播图位置
        project_id: JSON.parse(localStorage.getItem('user')).project_id,
        site: '',
      },
      // 控制显示新增分组对话框
      visible: false,
      // 控制新增分组确认按钮显示loading
      confirmLoading: false,
      // 分组列表数据
      groupList: [],
      // 定义table组件识别的数据结构
      datasFomat: [
        {
          title: '分组id',
          dataIndex: 'id',
          align: 'center',
          width: 100,
        },
        {
          title: '分组名',
          dataIndex: 'site',
          align: 'center',
          width: 200,
        },
        // {
        //   title: '所属项目id', // 列头文本
        //   dataIndex: 'project_id', // 要渲染的数据在对象中的键名
        //   align: 'center', // 对齐方式
        //   width: 100, //  列宽
        // },
        {
          title: '创建时间',
          align: 'center',
          scopedSlots: {
            //  暴露作用域插槽
            customRender: 'createdAt', //   暴露作用域插槽名 向外暴露 当前行的值,数据，索引 text record index
          },
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: {
            customRender: 'operation',
          },
        },
      ],
    };
  },
  created() {
    /* 获取分组列表 */
    this.getGroupList();
  },
  methods: {
    /* 获取分组列表 */
    getGroupList() {
      getCarouselGroup().then((res) => {
        this.groupList = res.result;
      });
    },
    /* 删除分组 */
    delgroup(datas) {
      delCarouselGroup({
        id: datas.id,
      }).then((res) => {
        if (res.code === 200) {
          /* 请求成功 删除成功 */
          message.success(res.msg);
          this.groupList = this.groupList.filter((item) => {
            return item.id !== datas.id;
          });
        } else {
          message.error(res.msg);
        }
      });
    },
    /* 显示新增分组对话框 */
    showAddModel() {
      this.visible = true;
    },
    /* 关闭新增分组对话框 */
    closeAddModel() {
      this.visible = false;
    },
    /* 新增分组 */
    addGroup() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 打开确认按钮loading
          this.confirmLoading = true;
          // 参数验证通过 发送添加分组请求
          addCarouselGroup(this.groupForm).then(async (res) => {
            if (!res.result.id) {
              return this.$message.error('创建失败');
            }
            message.success(res.msg);
            // 由于返回值没有完整信息 这里重新请求一遍数据
            await this.getGroupList();
            setTimeout(() => {
              // 关闭确认按钮Loading
              this.confirmLoading = false;
              //  关闭对话框
              this.visible = false;
            }, 200);
          });
        } else {
          return message.warning('位置没有填写或格式错误！');
        }
      });
    },
  },
  components: {},
  computed: {
    ...mapState('account', ['user']),
  },
  filters: {
    /* 时间格式化 */
    fomatterTime: (value) => {
      if (!value) return '';
      const res = timeFomatter(value);
      return res;
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  background-color: #fff;
  padding: 50px;
  overflow: hidden;
}
</style>
